<!DOCTYPE html>
<html class="x-admin-sm">
  
  <head>
    <meta charset="UTF-8">
    <title>角色设置模块</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="./layui_ext/dtree/font/dtreefont.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form id="ff" action="" method="post" class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        角色名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="role" name="rname" required="" lay-verify="required"
                        autocomplete="off" class="layui-input" readonly="readonly">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">
                        设置模块
                    </label>
                    <div style="overflow: auto;" id="toolbarDiv">
					  <ul id="demoTree" class="dtree" data-id="0"></ul>
					</div>
					<button class="layui-btn" lay-filter="set" lay-submit="">确定</button>
                </div>
            </form>
        </div>
    </div>
    
   <script type="text/javascript">

   		//js获取地址栏参数
	   function getQueryString(name)
	   {
	        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	        var r = window.location.search.substr(1).match(reg);
	        if(r!=null)return  unescape(r[2]); return null;
	   }
   		
	    layui.extend({
	        dtree: '{/}./layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
	      }).use(['dtree','layer','jquery','form'], function(){
	        var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery,form = layui.form;
	        
	        var rid = getQueryString("rid");
	        // 初始化树
	        var DemoTree = dtree.render({
	          elem: "#demoTree",//树的id
	          //data: demoTree, // 使用data加载
	          url: "/modules/findByRid?rid="+rid, // 使用url加载（可与data加载同时存在）
        	  dataStyle: "layuiStyle",  //使用layui风格的数据格式
        	  dataFormat: "list",  //配置data的风格为list
        	  response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
        	  checkbar:true //开启复选框
	      	});
	        
	        //点击复选框事件
	        /* dtree.on("chooseDone('demoTree')" ,function(obj){
        	  console.log(obj.checkbarParams); // 选中的所有复选框的参数
        	}); */
	        
	        form.on('submit(set)',function(data){
	        	//获取复选框选中值
	        	var params = dtree.getCheckbarNodesParam("demoTree");
	        	var ids = "";//ids存储所有选中节点id
	        	for(var i=0;i<params.length;i++){
	        		ids+=params[i].nodeId+",";
	        	}
	        	//发送请求分配模块
	        	$.post(
	        		"/roles/setModule",
	        		{
	        			ids:ids,
	        			rid:rid
	        		}
	        	);
	        	
	        	layer.alert("设置成功", {icon: 6},function () {
	                //关闭当前frame
	                  xadmin.close();
	                  // 可以对父窗口进行刷新 
	                  //xadmin.father_reload();
	              });
	        	return false;
	        });
      });
    </script>
  </body>
</html>